<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html >
<html>
    <head>
        <title>Search for ${model.propertyTypeName} in ${model.cityName}</title>
<!--        <title>Rentpad Listings</title>-->
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="${model.props.appPath}/css/jquery_mobile/jquery.mobile-1.2.1.min.css" type="text/css"/>
        <script src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
	<script src="${model.props.appPath}/js/jquery_mobile/jquery.mobile-1.2.1.min.js"></script>
        
        <style>
            a {text-decoration:none;} 
        </style>
        
        <script type="text/javascript">
            
            $(function() {
                $('#btn-page-next').closest('.ui-btn').show();
                $('#btn-page-prev').closest('.ui-btn').hide();
        
                $("#updateBtn").click( function() {
                    resetPaging();
                    check();
                });
                
                $("#btn-page-prev").click( function() {
                    prev();
                });
                
                $("#btn-page-next").click( function() {
                    next()
                });
                    
                $("#select-monthRateLow").on("change",function() {
                    $("#monthRateLow").val($(this).val());
                });
                
                $("#select-monthRateHigh").on("change",function() {
                    $("#monthRateHigh").val($(this).val());
                });
                
                $("#select-sqAreaLow").on("change",function() {
                    $("#sqAreaLow").val($(this).val());
                });
                
                $("#select-sqAreaHigh").on("change",function() {
                    $("#sqAreaHigh").val($(this).val());
                });
                
                $("#select-numBedroomsLow").on("change",function() {
                    $("#numBedroomsLow").val($(this).val());
                 });
                 
                 $("#select-numBedroomsHigh").on("change",function() {
                    $("#numBedroomsHigh").val($(this).val());
                 });
                 
                 $("#select-numBathroomsLow").on("change",function() {
                     $("#numBathroomsLow").val($(this).val());
                  });
                  
                  $("#select-numBathroomsHigh").on("change",function() {
                        $("#numBathroomsHigh").val($(this).val());
                  });
             });
            
             function resetPaging() {
                $("#text-items-per-page").val("12");
                $("#text-page-number").val("1");                
             }   
            
             function prev() {                
                var pageNumber = $("#text-page-number").val();
                pageNumber--;
                
                $("#text-page-number").val(pageNumber);
                check();
                
                $('html, body').animate({
                    scrollTop: $("#span-listings-count").offset().top
                }, 500);
            }
            
            function next() {
                var pageNumber = $("#text-page-number").val();
                pageNumber++;
                
                $("#text-page-number").val(pageNumber);   
                check();    
                
                $('html, body').animate({
                    scrollTop: $("#span-listings-count").offset().top
                }, 500);
            }
            
            function check() {
                var cityName = $("#cityName").val();
                
                var selectedTypes = new Array();
                var selectedFurnishing = new Array();
                var selectedPlaces = new Array();
                var selectedStatus = new Array();
                var selectedAmenities = new Array();
                
                $.each($("input[name='typecbx']:checked"), function() {
                    selectedTypes.push($(this).val());
                });                
                $.each($("input[name='furnishcbx']:checked"), function() {
                    selectedFurnishing.push($(this).val());
                });
//                $.each($("input[name='placecbx']:checked"), function() {
//                    selectedPlaces.push($(this).val());
//                });
//                $.each($("input[name='statuscbx']:checked"), function() {
//                    selectedStatus.push($(this).val());
//                });
//                $.each($("input[name='amenitycbx']:checked"), function() {
//                    selectedAmenities.push($(this).val());
//                });
                
                var monthRateLow = $( "#monthRateLow" ).val();
                var monthRateHigh = $( "#monthRateHigh" ).val();
                
                var sqAreaLow = $( "#sqAreaLow" ).val();
                var sqAreaHigh = $( "#sqAreaHigh" ).val();
                
                var numBedroomsLow = $( "#numBedroomsLow" ).val();
                var numBedroomsHigh = $( "#numBedroomsHigh" ).val();
                
                var numBathroomsLow = $( "#numBathroomsLow" ).val();
                var numBathroomsHigh = $( "#numBathroomsHigh" ).val();
                        
                var itemsPerPage = $("#text-items-per-page").val();
                var pageNumber = $("#text-page-number").val();
                    
                search(cityName, monthRateLow, monthRateHigh, sqAreaLow, sqAreaHigh, numBedroomsLow, numBedroomsHigh, numBathroomsLow, numBathroomsHigh, selectedTypes, selectedFurnishing, selectedPlaces, selectedStatus, selectedAmenities, itemsPerPage, pageNumber);
            }
            
            function search(cityName, monthRateLow, monthRateHigh, sqAreaLow, sqAreaHigh, numBedroomsLow, numBedroomsHigh, numBathroomsLow, numBathroomsHigh, selectedTypes, selectedFurnishing, selectedPlaces, selectedStatus, selectedAmenities, itemsPerPage, pageNumber) {
                try {
                    $.ajax({
                        type: 'POST',
                        url: "${model.props.appPath}/ws/search.htm",
                        data: {
                            cityName: cityName,
                            propertyTypeIDs: "["+selectedTypes+"]",
                            furnishTypeIDs: "["+selectedFurnishing+"]",
                            placeIDs: "["+selectedPlaces+"]",
                            statusTypeIDs: "["+selectedStatus+"]",
                            amenityIDs: "["+selectedAmenities+"]",
                            sqAreaLow: sqAreaLow,
                            sqAreaHigh: sqAreaHigh,
                            monthRateLow: monthRateLow,
                            monthRateHigh: monthRateHigh,
                            numBedroomsLow: numBedroomsLow,
                            numBedroomsHigh: numBedroomsHigh,
                            numBathroomsLow: numBathroomsLow,
                            numBathroomsHigh: numBathroomsHigh,
                            itemsPerPage: itemsPerPage,
                            pageNumber: pageNumber,
                            ham: "ham"
                        },
                        timeout : 200000,
                        success: function(data) {
                            try {
                                var host = data.model.host;
                                var port = data.model.port;
                                var rootPath = data.model.props.rootPath;
                                var appPath = data.model.props.appPath;
                                
                                var searchResult = data.model.searchResult;
                                var listings = searchResult.listings;                                
                                var totalListings = searchResult.totalListings;
                                var hasPrev = searchResult.hasPrev;
                                var hasNext = searchResult.hasNext;
                                
                                //CX: display total count
                                $("#span-listings-count").html(totalListings);
                                
                                //CX: enable / disable prev button                                
                                if (hasPrev) { 
                                    $("#btn-page-prev").removeAttr("disabled"); 
                                    $('#btn-page-prev').closest('.ui-btn').show();
                                }
                                else {                     
                                    $("#btn-page-prev").attr("disabled", true);
                                    $('#btn-page-prev').closest('.ui-btn').hide();
                                }
                                
                                //CX: enable / disable next button
                                if (hasNext) {
                                    $("#btn-page-next").removeAttr("disabled");
                                    $('#btn-page-next').closest('.ui-btn').show();
                                }
                                else {
                                    $("#btn-page-next").attr("disabled", true);
                                    $('#btn-page-next').closest('.ui-btn').hide();
                                }
                                
                                //CX: reflect list view                                                 
                                $("#view-list-outer-mobile").empty();  
                                $("#view-list-outer-mobile").append("<ul id=\"listingsView\" data-role=\"listview\" data-theme=\"c\" id=\"listingsView\"></ul>\n");
                                
                                for (var i = 0; i < listings.length; i++) {
                                    var listing = listings[i];                                    
                                    var prmaryPhoto="";
                                    if (listing.primaryPhoto) {
                                        prmaryPhoto = listing.primaryPhoto.filename;
                                    }
                                    $("#listingsView")
                                            .append("<li>\n\
                                                        <a href=\""+appPath+"/listing/"+listing.title+"/"+listing.id+"\" data-ajax=\"false\">\n\
                                                        <img src=\""+rootPath+"/uploads/img/002-"+prmaryPhoto+"\" style=\"min-height: 90px; min-width: 120px;\"/>\n\
                                                        <p style=\"display: block; text-align: left; padding-bottom: 2px; margin-left: 30px; font-size: 14px\"><b>"+listing.title+"</b></p>\n\
                                                        <p style=\"text-align: left; margin-left: 30px;\">&#8369; "+listing.monthRate+" / Mo.</p>\n\
                                                        <p style=\"text-align: left; margin-left: 30px;\">"+listing.city+"</p>\n\
                                                        <p style=\"text-align: left; margin-left: 30px;\">"+listing.sqArea+" sqm.</p>\n\
                                                        </a>\n\
                                                    </li>");
                                }
                                
                                $("#listingsView").listview().trigger("create");
                                $('#listingsView').listview('refresh');
                                $('#listingsView ul').listview('refresh');
                            } 
                            
                            catch (e) {
                                //alert("Success error: " + e);
                            }
                        },
                        error : function(xhr, textStatus, errorThrown) {
                            //alert('WS Error: ' + xhr);
                            //alert('WS Error: ' + textStatus);
                            //alert('WS Error: ' + errorThrown);
                        }
                    });
                } catch (e) {
                    alert(e);
                }                 
            }
                       
        </script>
        
    </head>
    
    <body>
        <div data-role="page" data-theme="d" id="searchPage">
            <%@include file="header_mobile.jsp" %> 

            <div data-role="header" data-theme="c">
                <h5 style="color: #666666; font-size: 20px"><span id="span-listings-count">${model.searchResult.totalListings}</span>Properties</h5>
                <input id="cityName" type="hidden" value="${model.city.title}"/>
                <a style="text-align: right; left: 80%; top: 20%; color: #006699;" href="#filterPopup" data-role="button" data-rel="dialog" data-transition="pop">Filter</a>           
            </div>

            <div data-role="content">

                <div id="view-list-outer-mobile" style="text-align: center; padding-bottom: 30px"> 
                    <ul data-role="listview" data-theme="c" id="listingsView">
                            <c:forEach items="${model.listings}" var="listing"> 
                                <li>
                                    <a href="${model.props.appPath}/listing/${listing.title}/${listing.id}" data-ajax="false">
                                        <img src="${model.props.rootPath}/uploads/img/002-${listing.primaryPhoto.filename}" style="min-height: 90px; min-width: 120px;"/>
                                        <p style="display: block; text-align: left; padding-bottom: 2px; margin-left: 30px; font-size: 14px"><b>${listing.title}</b></p>
                                        <p style="text-align: left; margin-left: 30px;">&#8369;${listing.monthRate} / Mo.</p>
                                        <p style="text-align: left; margin-left: 30px;">${listing.city}</p>
                                        <p style="text-align: left; margin-left: 30px;">${listing.sqArea} sqm.</p>
                                    </a>
                                </li>
                            </c:forEach>
                    </ul>
                </div>
                
                <fieldset class="ui-grid-a">
                    <div class="ui-block-a"><a id="btn-page-prev" data-role="button" data-mini="true">Prev</a></div>
                    <div class="ui-block-b"><a id="btn-page-next" data-role="button" data-mini="true">Next</a></div>	   
                </fieldset>
                
                <input id="text-items-per-page" type="hidden" value="12" />
                <input id="text-page-number" type="hidden" value="1" />

            </div>

            <div data-role="footer">
                <%@include file="footer_mobile.jsp" %>      
            </div>

        </div>
            
       <div data-role="page" id="filterPopup">

            <div data-role="header" data-theme="b">
		<h1>Filter Listings</h1>
            </div>

            <div data-role="content" data-theme="d" style="text-align:center;">	
                
                <form action="" method="">
                                
                                <div data-role="fieldcontain" style="border-bottom: 0px;">
                                    <fieldset data-role="controlgroup">
                                        <legend>Property Type:</legend>
                                            <input type="checkbox" name="typecbx" id="propertyType-2" value="2" class="custom" data-mini="true" />
                                            <label for="propertyType-2">Condominium / Apartment</label>
                                            <input type="checkbox" name="typecbx" id="propertyType-3" value="3" class="custom" data-mini="true"/>
                                            <label for="propertyType-1">House</label>
                                    </fieldset>
                                </div>
                        
                                <div data-role="fieldcontain" style="border-bottom: 0px;">
                                    <fieldset data-role="controlgroup">
                                        <legend>Furnishing:</legend>
                                            <input type="radio" name="furnishcbx" id="furnishType-1" value="1" data-mini="true"/>
                                            <label for="furnishType-1">Unfurnished</label>
                                            <input type="radio" name="furnishcbx" id="furnishType-2" value="2"  data-mini="true"/>
                                            <label for="furnishType-2">Semi Furnished</label>
                                            <input type="radio" name="furnishcbx" id="furnishType-3" value="3" data-mini="true"/>
                                            <label for="furnishType-3">Fully Furnished</label>
                                    </fieldset>
                                </div>
      
                                <input id="monthRateLow" type="hidden" name="monthRateLow" style="width:80px" value="0" />   
                                <input id="monthRateHigh" type="hidden" name="monthRateHigh" style="width:80px" value="999999" />
                    
                                <div data-role="fieldcontain" style="padding-top: 15px;">
                                    <fieldset data-role="controlgroup">
                                        <legend>Month Rate (in thousands):</legend>

                                        <label for="select-monthRateLow" style="text-align: left; font-size: 12px; color: #006699;">Min:</label>
                                        <input id="select-monthRateLow" type="range" name="select-monthRateLow" min="10,000" max="300,000" step="10" data-mini="true"/>

                                        <label for="select-monthRateHigh" style="text-align: left; font-size: 12px; color: #006699;">Max:</label>
                                        <input id="select-monthRateHigh" type="range" name="select-monthRateHigh" min="10,000" max="300,000" step="10" data-mini="true"/>
                                    </fieldset>
                                </div>     
                                
                                <input id="sqAreaLow" type="hidden" name="sqAreaLow" style="width:80px" value="0" />   
                                <input id="sqAreaHigh" type="hidden" name="sqAreaHigh" style="width:80px" value="999999" />
                    
                                <div data-role="fieldcontain">
                                    <fieldset data-role="controlgroup">
                                        <legend>Square Area:</legend>

                                        <label for="select-sqAreaLow" style="text-align: left; font-size: 12px; color: #006699;">Min:</label>
                                        <input type="range" name="select-sqAreaLow" id="select-sqAreaLow" min="10" max="200" step="10" data-mini="true"/>

                                        <label for="select-sqAreaHigh" style="text-align: left; font-size: 12px; color: #006699;">Max:</label>
                                        <input type="range" name="select-sqAreaHig" id="select-sqAreaHigh" min="10" max="200" step="10" data-mini="true"/>
                                    </fieldset>
                                </div>
                    
                                <input id="numBedroomsLow" type="hidden" name="numBedroomsLow" style="width:80px" value="0" />   
                                <input id="numBedroomsHigh" type="hidden" name="numBedroomsHigh" style="width:80px" value="999" />
                                
                                <div data-role="fieldcontain">
                                    <fieldset data-role="controlgroup">
                                        <legend>Bedrooms:</legend>
                                        
                                        <label for="select-numBedroomsLow" style="text-align: left; font-size: 12px; color: #006699;">Min:</label>
                                        <input type="range" name="select-numBedroomsLow" id="select-numBedroomsLow" min="0" max="9" data-mini="true"/>
                                        
                                        <label for="select-numBedroomsHigh" style="text-align: left; font-size: 12px; color: #006699;">Max:</label>
                                        <input type="range" name="select-numBedroomsHigh" id="select-numBedroomsHigh" min="0" max="9" data-mini="true"/>
                                    </fieldset>
                                </div>
                                
                                <input id="numBathroomsLow" type="hidden" name="numBathroomsLow" style="width:90px" value="0" />   
                                <input id="numBathroomsHigh" type="hidden" name="numBathroomsHigh" style="width:90px" value="999" />
                                
                                <div data-role="fieldcontain">
                                    <fieldset data-role="controlgroup">
                                        <legend>Bathrooms:</legend>
                                        
                                        <label for="select-numBathroomsLow" style="text-align: left; font-size: 12px; color: #006699;">Min:</label>
                                        <input type="range" name="select-numBathroomsLow" id="select-numBathroomsLow" min="0" max="9" data-mini="true"/>
                                        
                                        <label for="select-numBathroomsHigh" style="text-align: left; font-size: 12px; color: #006699;">Max:</label>
                                        <input type="range" name="select-numBathroomsHigh" id="select-numBathroomsHigh" min="0" max="9" data-mini="true"/>
                                    </fieldset>
                                </div>
              </form> 
				
		<p><a id="updateBtn" data-theme="b" data-rel="back" data-role="button" data-inline="true" data-icon="refresh">Update List</a></p>	
            </div>
        </div>
    </body>
</html>
